/**
 * Created by 86185 in 2020/8/30 on 18:01
 */
import React from "react"

import "@/components/common/PieRouseTypeChart/PieRouseTypeChart.component.styl"

class PieRouseTypeChart extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, legendData, seriesName, seriesData} = this.props.pieRouseTypeData;
        let myChart = echarts.init(document.getElementById(`${id}-pie-rouse-type-chart`));
        let option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                left: "center",
                bottom: "5%",
                textStyle: {
                    color: "#bfbebe"
                },
                data: legendData
            },
            series: [
                {
                    name: seriesName,
                    type: "pie",
                    radius: [20, 70],
                    center: ["50%", "40%"],
                    roseType: "area",
                    label: {
                        color: "#fff",
                        fontSize: 14,
                        formatter: function (params) {
                            return `${params.name}\n\n${params.percent}%`
                        }
                    },
                    data: seriesData
                }
            ]
        };
        window.onresize = function () {
            myChart.resize();
        }
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.pieRouseTypeData.id}-pie-rouse-type-chart`}
                 className="pie-rouse-type-chart">

            </div>
        )
    }
}

export default PieRouseTypeChart